<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>局部腐蚀监测腐蚀速率曲线</title>
    <script src="{{url_for('static', filename='js/jquery.3.6.min.js')}}">
    </script>
    <script src="{{url_for('static', filename='js/echarts.min.js')}}">
    </script>


</head>

<body>
    <img src="{{url_for('static',filename='img/sign3.png')}}" />
    <div class="title">
        局部腐蚀监测腐蚀速率曲线
    </div>
    <div class="zong">
        <!-- 总div -->
        <div>
            <!-- 空白区，设立高度 -->
        </div>


        <div>
            <!-- 中央主处理区 -->
            <div>
                <!-- 图形区 -->
                <div class="three">
                    <div class="shuli">
                        <!-- 图形区左文字 -->
                        腐蚀速率（um/a）
                    </div>
                    <div class="echart0">
                        <!-- 图形区正中央 -->
                        <!ECharts ref="chart" :option="option" />
                        <div id="main" style="width: 700px;height: 500px;border: aqua 3px solid;float:left;"></div>
                        <div id="yikuaianniu" style="width: 90px;height: 500px;border: aqua 3px solid;float:right;position: absolute;top:20.3%;left:68.4%;">
                            <p id="All_Time"  style="height: 100px;">最大腐蚀速率因子对应的时间</p>
                            <p id="All_CR_max" style="height: 50px;">最大局部腐蚀速率</p>
                            <p id="All_CR_avg" style="height: 50px;">均匀腐蚀速率</p>
                            <p>均匀腐蚀速率警戒线设置：<input type="text" id="addname" style="width: 60px;"/>um/a</p>
                            <button onclick="window.location.href='{{url_for('a02')}}'">查看其他腐蚀速率曲线</button>
                        </div>
                        <div style="float:left;">
                            <button id="export">export png</button>
                            <script type="text/javascript">
                                //初始化Echarts实例
                                const random = (min, max) => Math.round(Math.random() * (max - min) + min);
                                var myEcharts=echarts.init(document.getElementById('main'))
                                var time = [{%for item in time %}'{{item}}',{%endfor%}];
                                var cr_max = [{%for item in cr_max %}{{item}},{%endfor%}];
                                var cr_avg = [{%for item in cr_avg %}{{item}},{%endfor%}];
                                var lc = [{%for item in lc %}{{item}},{%endfor%}];
                                var max=0;
                                for (var a in cr_max){
                                    if (max<cr_max[a])
                                        max=cr_max[a];
                                }
                                for (var a in cr_avg){
                                    if (max<cr_avg[a])
                                        max=cr_avg[a];
                                }
                                for (var a in lc){
                                    if (max<lc[a])
                                        max=lc[a];
                                }
                                //console.log(max)
                                //定义变量
                                var option={
                                    toolbox: { feature: { saveAsImage: {} } },
                                    dataZoom: [

                                        { type: 'slider', xAxisIndex: 0, right: '20%', left: '20%' },

                                        { type: 'slider', yAxisIndex: 0, left: '90%', right: '5%' },
                                    ],
                                    //图例
                                    title:{text:''},
                                    //图例组件
                                    legend:{data:['最大腐蚀速率','均匀腐蚀速率','腐蚀因子'],textStyle:{color:'blue'}},
                                    xAxis:{data:time},
                                    yAxis: {max:max*1.2},
                                    tooltip: { show: true },
                                    series: [{
                                    name: '最大腐蚀速率',
                                    //柱状图
                                    type: 'line',
                                    //smooth: true,      //true 有弧度 ，false 没弧度（直线）
                                    //symbol: 'circle',   //将小圆点改成实心 不写symbol默认空心
                                    //symbolSize: 5,
                                    itemStyle: {
                                        normal: {
                                            lineStyle: {
                                              width:0.5// 0.1的线条是非常细的了
                                            }
                                        }
                                    },

                                    data: cr_max},
                                    {
                                    name: '均匀腐蚀速率',
                                    //柱状图
                                    type: 'line',
                                    //smooth: true,      //true 有弧度 ，false 没弧度（直线）
                                    //symbol: 'circle',   //将小圆点改成实心 不写symbol默认空心
                                    //symbolSize: 5,
                                    itemStyle: {
                                        normal: {
                                            lineStyle: {
                                              width:0.5// 0.1的线条是非常细的了
                                            }
                                        }
                                    },
                                    data: cr_avg},
                                    {
                                    name: '腐蚀因子',
                                    //柱状图
                                    //smooth: true,      //true 有弧度 ，false 没弧度（直线）
                                    //symbol: 'circle',   //将小圆点改成实心 不写symbol默认空心
                                    //symbolSize: 5,
                                    itemStyle: {
                                        normal: {
                                            lineStyle: {
                                              width:0.5// 0.1的线条是非常细的了
                                            }
                                        }
                                    },
                                    type: 'line',
                                    data: lc},
                                        /*{type: 'line',
                                        markLine: {
                                            // silent: true,
                                            lineStyle: {
                                              normal: {
                                                color: 'red'
                                              }
                                            },
                                            data: [{
                                                yAxis:0
                                            }],
                                            label: {
                                              normal: {
                                                formatter: '0'
                                              }
                                            },
                                        },}*/
                                    ]
                                };
                                //设置配置
                                    myEcharts.setOption(option);

                                document.getElementById('export').addEventListener('click', () => {
                                    const dz = myEcharts.getModel().option.dataZoom[0];
                                    // 记录当前时刻的偏移值
                                    const oldStart = dz.start;
                                    const oldEnd = dz.end;

                                    // 通过 action 将dataZoom组件数值范围设置为 0%-100%
                                    myEcharts.dispatchAction({ type: 'dataZoom', start: 0, end: 100 });
                                    // 监听渲染完成事件
                                    myEcharts.on('finished', download);

                                    function download() {
                                        const img = myEcharts.getDataURL({
                                            backgroundColor: '#fff',
                                            // 导出时排除 dataZoom 组件
                                            excludeComponents: ['toolbox', 'dataZoom'],
                                            pixelRatio: 1,
                                        });
                                        const anchor = document.createElement('a');
                                        anchor.href = img;
                                        anchor.setAttribute('download', 'test.jpeg');
                                        anchor.click();
                                        // 移除事件监听，避免多次导出
                                        myEcharts.off('finished', download);

                                        myEcharts.dispatchAction({ type: 'dataZoom', start: oldStart, end: oldEnd });
                                    }
                                });

                                function genSeriesData(len) {
                                    const result = [];
                                    let cursor = 0;
                                    for (let i = 0; i < len; i += 1) {
                                        const node = [(cursor = cursor + random(10, 100)), random(100, 1000)];
                                        result.push(node);
                                    }
                                    return result;
                                }

                                setInterval(function () {
                                    //myEcharts.clear();

                                    myEcharts.setOption({
                                        series: [{
                                            type:'line',
                                            markLine: {
                                            // silent: true,
                                            lineStyle: {
                                              normal: {
                                                color: 'red'
                                              }
                                            },
                                            data: [{
                                                yAxis: document.getElementById('addname').value
                                            }],
                                            label: {
                                              normal: {
                                                formatter: '警戒线'
                                              }
                                            },
                                        },
                                        }]
                                    });
                                }, 500);

                                $(function () {
                                    var int = setInterval(function () {  //设置定时器

                                       $.ajax(
                                           {
                                               url:"/corrosion/speedmaxdata", //从setData函数中获取数据
                                               type:"get",
                                               dateType:'json',
                                                success:function(ret){
                                                    var newData = JSON.stringify(ret);
                                                    newData = eval("("+newData+")");
                                                    //已经完成从data页面获取了数据，之后要拆解数据然后绘制折线图
                                                    //console.log(typeof newData)
                                                    //window.alter(ret)
                                                    var timetmp = [],
                                                    cr_max = [],
                                                    cr_avg = [],
                                                    lc = [];
                                                    var a,key,max=1;
                                                    for (a in newData["data"]){
                                                        //console.log(newData["data"][a]);
                                                            for (key in newData["data"][a]){
                                                                if (key == "Time")
                                                                    timetmp.push(newData["data"][a][key]);
                                                                if (key == "CR_max")
                                                                    cr_max.push(newData["data"][a][key]);
                                                                if (key == "CR_avg")
                                                                    cr_avg.push(newData["data"][a][key]);
                                                                if (key == "LC_Rate_Factor")
                                                                    lc.push(newData["data"][a][key]);

                                                            }

                                                    }
                                                    for (a in cr_max){
                                                        if (max<cr_max[a])
                                                            max=cr_max[a];
                                                    }
                                                    for (a in cr_avg){
                                                        if (max<cr_avg[a])
                                                            max=cr_avg[a];
                                                    }
                                                    for (a in lc){
                                                        if (max<lc[a])
                                                            max=lc[a];
                                                    }
                                                    //console.log(max);
                                                    //console.log("结束");
                                                    myEcharts.setOption({
                                                        xAxis:{data:timetmp},
                                                        series: [{
                                                            name: '最大腐蚀速率',
                                                            //柱状图
                                                            type: 'line',
                                                            data: cr_max},
                                                            {
                                                            name: '均匀腐蚀速率',
                                                            //柱状图
                                                            type: 'line',
                                                            data: cr_avg},
                                                            {
                                                            name: '腐蚀因子',
                                                            //柱状图
                                                            type: 'line',
                                                            data: lc}],
                                                        yAxis:[{max:max*1.2}]

                                                    });
                                                    document.getElementById("All_Time").innerHTML="最大腐蚀速率因子对应的时间"+newData["All_Time"];
                                                    document.getElementById("All_CR_max").innerHTML="最大局部腐蚀速率"+newData["All_CR_max"];
                                                    document.getElementById("All_CR_avg").innerHTML="均匀腐蚀速率"+newData["All_CR_avg"];

                                                    var table = document.getElementsByTagName("table");
                                                    var tbody=document.getElementsByTagName("tbody")[0];
                                                    while (tbody.hasChildNodes()) { tbody.removeChild(tbody.lastChild); }
                                                    var tBody = document.createElement("tbody");
                                                    for(var i=0;i<timetmp.length;i++){
                                                        tr = document.createElement("tr");
                                                        tBody.appendChild(tr);
                                                        for(var j=0;j<5;j++){
                                                            td = document.createElement("td");
                                                            tr.appendChild(td);
                                                            if(j==0)    td.innerHTML=newData["name"];
                                                            else if(j==1) td.innerHTML=timetmp[i];
                                                            else if(j==2)td.innerHTML=cr_max[i];
                                                            else if(j==3)td.innerHTML=cr_avg[i];
                                                            else          td.innerHTML=lc[i];

                                                        }
                                                    }
                                                    tbody.appendChild(tBody);
                                                    document.body.appendChild(table);
                                                    //document.getElementById("name1").innerHTML=newData["name"];
                                                    //document.getElementById("All_Time1").innerHTML=newData["All_Time"];
                                                    //document.getElementById("All_CR_max1").innerHTML=newData["All_CR_max"];
                                                    //document.getElementById("All_CR_avg1").innerHTML=newData["All_CR_avg"];
                                                    //document.getElementById("All_LC_Rate_Factor1").innerHTML=newData["All_LC_Rate_Factor"];

                                                }

                                           }
                                       )
                                    },120000)
                                })
                                        $.ajax(
                                           {
                                               url:"/corrosion/speedmaxdata", //从setData函数中获取数据
                                               type:"get",
                                               dateType:'json',
                                                success:function(ret){
                                                    var newData = JSON.stringify(ret);
                                                    newData = eval("("+newData+")");
                                                    //已经完成从data页面获取了数据，之后要拆解数据然后绘制折线图
                                                    //console.log(typeof newData)
                                                    //window.alter(ret)
                                                    var timetmp = [],
                                                    cr_max = [],
                                                    cr_avg = [],
                                                    lc = [];
                                                    var a,key,max=1;
                                                    for (a in newData["data"]){
                                                        //console.log(newData["data"][a]);
                                                            for (key in newData["data"][a]){
                                                                if (key == "Time")
                                                                    timetmp.push(newData["data"][a][key]);
                                                                if (key == "CR_max")
                                                                    cr_max.push(newData["data"][a][key]);
                                                                if (key == "CR_avg")
                                                                    cr_avg.push(newData["data"][a][key]);
                                                                if (key == "LC_Rate_Factor")
                                                                    lc.push(newData["data"][a][key]);

                                                            }

                                                    }
                                                    for (a in cr_max){
                                                        if (max<cr_max[a])
                                                            max=cr_max[a];
                                                    }
                                                    for (a in cr_avg){
                                                        if (max<cr_avg[a])
                                                            max=cr_avg[a];
                                                    }
                                                    for (a in lc){
                                                        if (max<lc[a])
                                                            max=lc[a];
                                                    }
                                                    //console.log(max);
                                                    //console.log("结束");
                                                    myEcharts.setOption({
                                                        xAxis:{data:timetmp},
                                                        series: [{
                                                            name: '最大腐蚀速率',
                                                            //柱状图
                                                            type: 'line',
                                                            data: cr_max},
                                                            {
                                                            name: '均匀腐蚀速率',
                                                            //柱状图
                                                            type: 'line',
                                                            data: cr_avg},
                                                            {
                                                            name: '腐蚀因子',
                                                            //柱状图
                                                            type: 'line',
                                                            data: lc}],
                                                        yAxis:[{max:max*1.2}]

                                                    });
                                                    document.getElementById("All_Time").innerHTML="最大腐蚀速率因子对应的时间"+newData["All_Time"];
                                                    document.getElementById("All_CR_max").innerHTML="最大局部腐蚀速率"+newData["All_CR_max"];
                                                    document.getElementById("All_CR_avg").innerHTML="均匀腐蚀速率"+newData["All_CR_avg"];

                                                    var table = document.getElementsByTagName("table");
                                                    var tbody=document.getElementsByTagName("tbody")[0];
                                                    while (tbody.hasChildNodes()) { tbody.removeChild(tbody.lastChild); }
                                                    var tBody = document.createElement("tbody");
                                                    for(var i=0;i<timetmp.length;i++){
                                                        tr = document.createElement("tr");
                                                        tBody.appendChild(tr);
                                                        for(var j=0;j<5;j++){
                                                            td = document.createElement("td");
                                                            tr.appendChild(td);
                                                            if(j==0)    td.innerHTML=newData["name"];
                                                            else if(j==1) td.innerHTML=timetmp[i];
                                                            else if(j==2)td.innerHTML=cr_max[i];
                                                            else if(j==3)td.innerHTML=cr_avg[i];
                                                            else          td.innerHTML=lc[i];

                                                        }
                                                    }
                                                    tbody.appendChild(tBody);
                                                    document.body.appendChild(table);
                                                    //document.getElementById("name1").innerHTML=newData["name"];
                                                    //document.getElementById("All_Time1").innerHTML=newData["All_Time"];
                                                    //document.getElementById("All_CR_max1").innerHTML=newData["All_CR_max"];
                                                    //document.getElementById("All_CR_avg1").innerHTML=newData["All_CR_avg"];
                                                    //document.getElementById("All_LC_Rate_Factor1").innerHTML=newData["All_LC_Rate_Factor"];

                                                }

                                           }
                                       )
                            </script>
                            <label>点此保存折线图</label>
                            <!input type="text" id="addname" />
                        </div>



                    </div>
                    <div class="shuli">
                        <!-- 图形区右文字 -->
                        腐蚀速率因子
                    </div>
                </div>
                <div class="time">
                    <!-- 时间 -->
                    时间
                </div>
            </div>
            <div class="border">
                <!-- 数据显示区 -->
                <table border='1'>

                    <thead>
                        <tr>
                            <th>name</th>
                            <th>时间</th>
                            <th>最大腐蚀速率（um/a）</th>
                            <th>均匀腐蚀速率（um/a）</th>
                            <th>腐蚀速率因子</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td id="name1">{{ a }}</td>
                            <td id="All_Time1">{{ b }}</td>
                            <td id="All_CR_max1">{{ c }}</td>
                            <td id="All_CR_avg1">{{ d }}</td>
                            <td id="All_LC_Rate_Factor1">{{ e }}</td>
                        </tr>
                        <tr>
                            <td>李四</td>
                            <td>19</td>
                            <td>1990-9-9</td>
                            <td>13682299090</td>
                            <td>阿里巴巴</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>3</td>
                            <td>3</td>
                            <td>3</td>
                            <td>3</td>
                        </tr>
                        <tr>
                            <td>4</td>
                            <td>4</td>
                            <td>4</td>
                            <td>4</td>
                            <td>4</td>
                        </tr>
                        <tr>
                            <td>5</td>
                            <td>5</td>
                            <td>5</td>
                            <td>5</td>
                            <td>5</td>
                        </tr>
                        <tr>
                            <td>6</td>
                            <td>6</td>
                            <td>6</td>
                            <td>6</td>
                            <td>6</td>
                        </tr>
                        <tr>
                            <td>7</td>
                            <td>7</td>
                            <td>7</td>
                            <td>7</td>
                            <td>7</td>
                        </tr>
                        <tr>
                            <td>8</td>
                            <td>8</td>
                            <td>8</td>
                            <td>8</td>
                            <td>8</td>
                        </tr>
                        <tr>
                            <td>9</td>
                            <td>9</td>
                            <td>9</td>
                            <td>9</td>
                            <td>9</td>
                        </tr>
                        <tr>
                            <td>10</td>
                            <td></td>
                            <td></td>
                            <td> </td>
                            <td> </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="status">
                <!-- 按钮区 -->
                <input type="button" value="通讯状态" class="btn2" onclick="window.location.href='{{url_for('FirstFage')}}'">
                <input type="button" value="腐蚀深度" class="btn2" onclick="window.location.href='{{url_for('deep')}}'">
                <input type="button" value="阴极保护" class="btn2" onclick="window.location.href='{{url_for('protect')}}'">
                <input type="button" value="监测数据" class="btn2" onclick="">
            </div>
        </div>

        <div class="kong">

        </div>
        <div class="checkbox">
<!--            &lt;!&ndash; 右侧复选框区 &ndash;&gt;-->
<!--            <div class="right">-->
<!--                &lt;!&ndash; 最大腐蚀速率 &ndash;&gt;-->
<!--                最大腐蚀速率-->
<!--                <input type="button" value="1" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="2" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="3" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="4" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="5" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="6" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="7" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="8" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="9" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="10" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="11" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="12" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="13" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="14" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="15" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="16" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="17" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="18" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="19" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="20" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="21" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="22" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="23" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="24" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="25" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="26" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="27" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="28" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="29" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="30" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="31" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="32" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--            </div>-->
<!--            <div class="right">-->
<!--                &lt;!&ndash; 均匀腐蚀速率 &ndash;&gt;-->
<!--                均匀腐蚀速率-->
<!--                <input type="button" value="1" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="2" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="3" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="4" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="5" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="6" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="7" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="8" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="9" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="10" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="11" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="12" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="13" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="14" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="15" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="16" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="17" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="18" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="19" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="20" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="21" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="22" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="23" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="24" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="25" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="26" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="27" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="28" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="29" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="30" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="31" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="32" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--            </div>-->
<!--            <div class="right">-->
<!--                &lt;!&ndash; 腐蚀速率因子 &ndash;&gt;-->
<!--                腐蚀速率因子-->
<!--                <input type="button" value="1" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="2" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="3" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="4" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="5" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="6" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="7" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="8" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="9" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="10" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="11" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="12" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="13" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="14" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="15" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="16" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="17" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="18" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="19" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="20" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="21" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="22" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="23" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="24" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="25" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="26" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="27" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="28" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="29" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="30" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="31" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--                <input type="button" value="32" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">-->
<!--            </div>-->
        </div>
    </div>
    <div class="back1">
        宁波科金工业腐蚀监测技术有限公司
    </div>
    <div class="back2">
        Ningbo Kejin Industry Corrosion Monitoring Technology Ltd.
    </div>
</body>
<script>
    import {
        createComponent
    } from 'echarts-for-vue';
    import * as echarts from 'echarts';
</script>
<style>
    .title {
        text-align: center;
        font-size: 45px;
    }
    
    .zong {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
    
    .three {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
    
    .shuli {
        writing-mode: vertical-rl;
    }
    
    .time {
        height: 21px;
        width: 800px;
        text-align: right;
        margin: auto
    }
    
    .status {
        margin-top: 40px;
        display: flex;
        flex-direction: row;
        justify-content: center
    }
    
    .kong {
        width: 50px
    }
    
    .right {
        writing-mode: vertical-rl;
    }
    
    .checkbox {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
    
    .btn2 {
        height: 40px;
        width: 100px;
        border-radius: 50%;
        font-size: 15px;
        margin-left: 30px;
        border-width: 1px
    }
    
    .back1 {
        position: relative;
        top: 50px;
        font-size: 25px;
        text-align: center;
    }
    
    .back2 {
        top: 55px;
        position: relative;
        font-size: 25px;
        text-align: center;
    }
    
    .echart0 {
        width: 800px;
        height: 500px;
        border: solid 1px;
    }
    
    .border {
        width: 800px;
        height: 200px;
        border: solid 1px;
        margin: auto;
        margin-top: 40px
    }
    table,tbody {
            display: block;
            height: 155px;
            border: 0;
            border-spacing: 0;
            border-collapse: collapse;
            cursor: default;
        }

        tbody {
            overflow-y: scroll;
        }

        table thead,
        tbody tr {
            display: table;
            width: 100%;
            table-layout: fixed;
        }

        table thead {
            width: calc(100% - 1em)
        }

        table thead th {
            background: #84acde;
            width: 20%;
        }

        table tbody td {
            width: 20%;
            text-align: center;
        }
</style>

</html>